﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="GovernmentOfficeProject.common.view.ViewPageBase" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/lib/easyui/themes/bootstrap/easyui.css"/>  
    <link rel="stylesheet" type="text/css" href="/lib/easyui/themes/icon.css"/>  
    <script type="text/javascript" src="/lib/easyui/jquery-1.8.0.min.js"></script>   
    <script type="text/javascript" src="/lib/easyui/jquery.easyui.min.js"></script>  
    <script type="text/javascript" src="/lib/easyui/plugins/jquery.datagrid.js"></script>  
    <script type="text/javascript" src="/lib/easyui/locale/easyui-lang-zh_CN.js"></script> 
    <script type="text/javascript" src="/lib/common.js"></script> 
    <style type="text/css">
        html, body
        {
            padding:0;margin:0;
            width:100%;
            height:100%;
        }

        .subTitle
        {
            background:url('/images/subTitle_bg.png') repeat-x;
            width:100%;
            color:#fff;
            font-weight:bold;
            padding:3px;
        }

        #smsContentInfo
        {
            padding:3px;
        }
    </style>
    <script type="text/javascript">

        function resizeHandler() {
            var containerHeight = document.documentElement.clientHeight;
            var containerWidth = document.documentElement.clientWidth;
            var seletDgHeight = (containerHeight - 130) / 2;
            $("#mydgContainer,#sysdgContainer").css("height", seletDgHeight);
            $("#mydgContainer,#sysdgContainer").css("width", containerWidth - 425);

            $("#mydg,#sysdg").datagrid({ fit: true });
            
            $("#selectedDgContainer").css("height", containerHeight - 316);

            $("#selectedDg").datagrid({fit:true});

        }
        //个人通讯簿查询
        function myContactsSearchHandler() {
            $('#mydg').datagrid('load', {
                Name: $("#txt_name").val(),
                MobileNumber: $("#txt_mobile").val()
            });
        }

        //系统通讯簿查询
        function sysContactsSearchHandler() {
            $('#sysdg').datagrid('load', {
                RealName: $("#txt_sysName").val(),
                MobilePhone: $("#txt_sysMobile").val()
            });
        }

        var selectedData = [];

        //选中事件
        function selectedHandler(Id, Name, MobileNumber, Company, type) {
            var selectedData = clone($("#selectedDg").datagrid("getRows"));
            var alreadyExists = false;
            //判断是否已存在在已选列表
            //
            for (var i = 0; i < selectedData.length; i++) {
                if (Id == selectedData[i].Id && type == selectedData[i].type) {
                    alreadyExists = true;
                    break;
                }
            }
            if(!alreadyExists) {
                //selectedData.push({ Id: Id, Name: Name, MobileNumber: MobileNumber, Company: Company, type: type });
                $('#selectedDg').datagrid('appendRow', {
                    Id: Id, Name: Name, MobileNumber: MobileNumber, Company: Company, type: type
                });
            }
        }

        //取消选中
        function unSelectedHandler(Id, type) {
            var data = $("#selectedDg").datagrid("getRows");
            for (var i = 0; i < data.length; i++) {
                if (Id == data[i].Id && type == data[i].type) {
                    $("#selectedDg").datagrid("deleteRow", i);
                    break;
                }
            }
        }

        //删除已选
        function deleteSelected(Id, type,rowIndex) {
            var tt = "";
            if (type == 0) {
                tt = "my";
            } else if (type == 1) {
                tt = "sys";
            } else {
                tt = "custom";
            }
            if(tt != "custom")
                unSelectedHandler(Id, tt);

            var contactsData = [];
            var contactsId = "";
            //my
            if (tt == "my") {
                contactsId = "#mydg";
                contactsData = clone($(contactsId).datagrid("getRows"));
                for (var i = 0 ; i < contactsData.length; i++) {
                    if (Id == contactsData[i].Id) {
                        $(contactsId).datagrid("unselectRow", i);
                        break;
                    }
                }
            //sys
            } else if (tt == "sys") {
                contactsId = "#sysdg";
                contactsData = clone($(contactsId).datagrid("getRows"));
                for (var i = 0 ; i < contactsData.length; i++) {
                    if (Id == contactsData[i].UserID) {
                        $(contactsId).datagrid("unselectRow", i);
                        break;
                    }
                }
            //custom
            } else {
                $("#selectedDg").datagrid("deleteRow", rowIndex);
            }
            
        }

        //检查手机号是否重复
        function checkMobileRepeat(mobileNumber) {
            var selectedData = clone($("#selectedDg").datagrid("getRows"));
            for (var i = 0; i < selectedData.length; i++) {
                if (selectedData[i].MobileNumber == mobileNumber) {
                    return true;
                }
            }
            return false;
        }

        //克隆方法
        function clone(obj){
            var objClone;
            if (obj.constructor == Object){
                objClone = new obj.constructor();
            }else{
                objClone = new obj.constructor(obj.valueOf());
            }
            for(var key in obj){
                if ( objClone[key] != obj[key] ){
                    if ( typeof(obj[key]) == 'object' ){
                        objClone[key] = clone(obj[key]);
                    }else{
                        objClone[key] = obj[key];
                    }
                }
            }
            objClone.toString = obj.toString;
            objClone.valueOf = obj.valueOf;
            return objClone;
        }

        function smsChangeHadnler() {
            var ct = $("#txtArea_smsContent").val();
            $("#txtArea_smsPerview").val("政府办信息系统通知:" + ct);
            $("#smsCount").html(ct.length);
            if (ct.length > 60) {
                $("#txtArea_smsContent").val(ct.substr(0, 60));
            }
        }
        

        $(document).ready(function () {

           resizeHandler();

            //初始化已选通讯簿表格
            $('#selectedDg').datagrid({
                rownumbers:true,
                singleSelect:true,
                fitColumns: true,
                columns: [[
                    { field: 'Name', title: '姓名', width: 100 },
                    { field: 'Company', title: '单位/部门', width: 100 },
                    { field: 'MobileNumber', title: '手机', width: 100 },
                    { field: 'Id',title:'编辑',width:100,
                        formatter: function (value, rowData, rowIndex) {
                            if(rowData.type == "my"){
                                t = 0;
                            }else if(rowData.type == "sys"){
                                t = 1;
                            }else{
                                t = 2;
                            }
                            return "<a herf='javascript:void(0);' onClick='deleteSelected(" + value + ","+t+","+rowIndex+")'>删除</a>";
                        }
                    }
                ]]
            });

            $("#mydg").datagrid({
                onCheckAll: function (rows) {
                    for (var i = 0; i < rows.length; i++) {
                        selectedHandler(rows[i].Id, rows[i].Name, rows[i].MobileNumber, rows[i].Company, 'my');
                    }
                },
                onUncheckAll: function (rows) {
                    for (var i = 0; i < rows.length; i++) {
                        unSelectedHandler(rows[i].Id, 'my');
                    }
                },
                onSelect: function (rowIndex, rowData) {
                    selectedHandler(rowData.Id, rowData.Name, rowData.MobileNumber, rowData.Company, 'my');
                },
                onUnselect: function (rowIndex, rowData) {
                    unSelectedHandler(rowData.Id, 'my');
                },
                onLoadSuccess: function (loadData) {
                    var selectedData = clone($("#selectedDg").datagrid("getRows"));
                    var data = loadData.rows;
                    for (var i = 0; i < selectedData.length; i++) {
                        for (var j = 0; j < data.length; j++) {
                            if (selectedData[i].Id == data[j].Id && selectedData[i].type == 'my') {
                                $("#mydg").datagrid("checkRow", j);
                            }
                        }
                    }
                }

            });

            $("#sysdg").datagrid({
                onCheckAll: function (rows) {
                    for (var i = 0; i < rows.length; i++) {
                        selectedHandler(rows[i].UserID, rows[i].RealName, rows[i].MobilePhone, rows[i].Company, 'sys');
                    }
                },
                onUncheckAll: function (rows) {
                    for (var i = 0; i < rows.length; i++) {
                        unSelectedHandler(rows[i].UserID, 'sys');
                    }
                },
                onSelect: function (rowIndex, rowData) {
                    selectedHandler(rowData.UserID, rowData.RealName, rowData.MobilePhone, rowData.Company, 'sys');
                },
                onUnselect: function (rowIndex, rowData) { 
                    unSelectedHandler(rowData.UserID, 'sys');
                },
                onLoadSuccess: function (loadData) {
                    var selectedData = clone($("#selectedDg").datagrid("getRows"));
                    var data = loadData.rows;
                    for (var i = 0; i < selectedData.length; i++) {
                        for (var j = 0; j < data.length; j++) {
                            if (selectedData[i].Id == data[j].UserID && selectedData[i].type == 'sys') {
                                $("#sysdg").datagrid("checkRow", j);
                            }
                        }
                    }
                }

            });

            //自定义添加
            var customId = 1;
            $("#btn_addCustom").click(function () {
                if ($("#customFm").form('validate')) {
                    var name = $("#txt_customName").val();
                    var mobile = $("#txt_customMobile").val();
                    if (checkMobileRepeat(mobile)) {
                        alert("此手机号码已添加！");
                        return;
                    }
                    selectedHandler(customId, name, mobile, "", "custome");
                    customId++;
                }
                
            });

            //发送
            $("#btn_save").click(function () {
                var textContent = $("#txtArea_smsContent").val();
                var selectedUser = $("#selectedDg").datagrid("getRows");
                if (textContent == "") {
                    alert("短息内容不能为空！");
                    return;
                }
                if(selectedUser.length == 0){
                    alert("没有待发号码，请选择联系人！");
                    return;
                }
                
                $.messager.confirm('确认', '您确定要发送短信通知吗?', function (r) {
                    if (r) {
                        $.ajax({
                            type: 'post', cache: false, dataType: 'json',
                            url: '/handler/InformSmsHandler.ashx',
                            data: [
                             { name: 'action', value: 'save' },
                             { name: 'smsContent', value: textContent },
                             { name: 'data', value: stringify(selectedUser) }
                            ],
                            success: function (result) {
                                if (!result.IsSuccess) {
                                    alert(result.Msg);
                                    $("#txtUsername").focus();
                                    return;
                                } else {
                                    alert("保存成功，请到通讯日志中查看详细！");
                                }
                            },
                            error: function () {
                                alert('发送系统错误,请与系统管理员联系!');
                            },
                            beforeSend: function () {
                                $("#btn_save").attr("disabled", true);
                            },
                            complete: function () {
                                $("#btn_save").attr("disabled", false);
                            }
                        });
                    }
                });
                
            });

            //取消
            $("#btn_cancel").click(function () {
                $("#mydg").datagrid("unselectAll");
                $("#sysdg").datagrid("unselectAll");

                var item = $("#selectedDg").datagrid("getRows");
                if (item) {
                    for (var i = item.length - 1; i >= 0; i--) {
                        var index = $("#selectedDg").datagrid("getRowIndex", item[i]);
                        $("#selectedDg").datagrid("deleteRow", index);
                    }
                }
                $('#selectedDg').datagrid('loadData', { total: 0, rows: [] });
            });

            $.extend($.fn.validatebox.defaults.rules, {
                mobileNumber: {
                    validator: function (value, param) {
                        return /^(1(([35][0-9])|(47)|[8][01236789]))\d{8}$/.test(value);
                    }, message: '请输入正确的手机号码'
                }
            });
        });
    </script>
</head>
<body class="easyui-layout" id="layout" onresize="resizeHandler()">
       <div  data-options="region:'east',title:'短信通知',split:true" style="width:420px;padding:0px; overflow:hidden;">
            <div class="subTitle">短信预览</div>
            <textarea id="txtArea_smsPerview" rows="20" cols="100" disabled="disabled" style="height:80px;width:100%" >政府办信息系统通知:</textarea>
            <div class="subTitle">短信内容</div>
            <textarea id="txtArea_smsContent" onkeydown="smsChangeHadnler()" 
                onkeyup="smsChangeHadnler()" onkeydown="smsChangeHadnler()"
                            onchange="smsChangeHadnler()" onkeypress="smsChangeHadnler()" onmousedown="smsChangeHadnler()" 
                            onselect="smsChangeHadnler()"
                rows="20" cols="100" style="height:80px;width:100%" ></textarea>
            <div id="smsContentInfo">最多60个字符 已输入<span id="smsCount">0</span>个 </div>
            <div id="selectedDgContainer">
                <table id="selectedDg" title="已选通讯簿"  style="height:200px"></table>
            </div>
            <div class="subTitle">操作</div>
            <div style="height:100px;">
                <div class="easyui-panel" fit="true" style="padding:3px;">
                    <a href="javascript:void(0)" id="btn_save"  class="easyui-linkbutton" iconCls="icon-add" >发送</a>  
                    <a href="javascript:void(0)" id="btn_cancel"  class="easyui-linkbutton" iconCls="icon-add" >取消</a>  
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'选择联系人'" id="mainDiv" style="overflow-x:hidden;overflow-y:hidden">
            <div class="subTitle">个人通讯簿</div>
            <div id="mydgContainer" style="height:43%;width:100%;margin-bottom:3px;">
                <table id="mydg" width="100%" class="easyui-datagrid"  
                    url="/handler/ContactsDatafeed.ashx?action=list" 
                    data-options="rownumbers:true,
                                singleSelect:false,
                                rownumbers:true,
                                fitColumns:true,
                                pagination:true,
                                pageList:[5,10,20,30,40,50],
                                fit:true,
                                toolbar:'#myCtctoolbar'" >
		            <thead>
			            <tr style="height:20px">
				             <th data-options="field:'Name',width:80">姓名</th>
				            <th data-options="field:'Company',width:100">单位/部门</th>
				            <th data-options="field:'MobileNumber',width:80,align:'right'">手机号码</th>
                            <th data-options="field:'ck',checkbox:true,height:16">选择</th>
			            </tr>
		            </thead>
	            </table>
            </div>

            <div class="subTitle">系统通讯簿</div>
            <div id="sysdgContainer" style="height:40%;margin-bottom:3px;">
                <table id="sysdg" class="easyui-datagrid"  
                    url="/handler/SystemContactsDatafeed.ashx?action=list"
                    data-options="rownumbers:true,
                                singleSelect:false,
                                rownumbers:true,
                                fitColumns:true,
                                pagination:true,
                                pageList:[5,10,20,30,40,50],
                                fit:true,
                                toolbar:'#sysCtctoolbar'"  >
		            <thead>
			            <tr>
				            <th data-options="field:'RealName',width:80">姓名</th>
				            <th data-options="field:'DeptNames',width:100">单位/部门</th>
				            <th data-options="field:'MobilePhone',width:80,align:'right'">手机号码</th>
                            <th data-options="field:'ck',checkbox:true">选择</th>
			            </tr>
		            </thead>
	            </table>
            </div>
            <div class="subTitle">自定义</div>
            <div style="height:100px;">
                <form id="customFm">
                    <div class="easyui-panel" fit="true" style="padding:3px;">
                        <span>姓名</span>
                        <input id="txt_customName" type="text" class="easyui-validatebox" data-options="required:true"/>
                        <span>手机号</span>
                        <input id="txt_customMobile" type="text" class="easyui-validatebox" data-options="required:true,validType:'mobileNumber'"/>
                        <a href="javascript:void(0)" id="btn_addCustom"  class="easyui-linkbutton" iconCls="icon-add"  onclick="newUser()">增加</a>  
                    </div>
                </form>
            </div>
        </div>
        
        <div id="myCtctoolbar">
            <div>
                姓名 <input id="txt_name" type="text" style="width:100px"/> &nbsp;
                手机 <input id="txt_mobile" type="text" style="width:100px"/> &nbsp;
                <a href="javascript:void(0)" id="btn_search" onclick="myContactsSearchHandler()" class="easyui-linkbutton" iconCls="icon-search" >查询</a>  
            </div>
        </div>  


        <div id="sysCtctoolbar">
            <div>
                姓名 <input id="txt_sysName" type="text" style="width:100px"/> &nbsp;
                手机 <input id="txt_sysMobile" type="text" style="width:100px"/> &nbsp;
                <a href="javascript:void(0)" id="A1" onclick="sysContactsSearchHandler()" class="easyui-linkbutton" iconCls="icon-search" >查询</a>  
            </div>
        </div>  

</body>
</html>
